The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Drop down box & text box issue
beadedtrinketsbyangie
post Jun 28 2007, 08:29 PM
Post #1





Group: Members
Posts: 1
Joined: 28-June 07
Member No.: 3,229
I have a website with a drop down box that I want to drive how many text boxes I have available. If my customer chooses the first selection it will give them 10 text boxes, if they choose the second selection it will give them 20 text boxes and so on. Does anyone have an idea as to how to make that happen. I have searched everywhere and haven't been able to come up with anything. Thanks to anyone who can help me.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lavazza
post Jun 28 2007, 11:01 PM
Post #2


Member
***

Group: Members
Posts: 60
Joined: 25-June 07
Member No.: 3,191
QUOTE(beadedtrinketsbyangie @ Jun 29 2007, 01:29 PM) *

I have a website with a drop down box that I want to drive how many text boxes I have available. If my customer chooses the first selection it will give them 10 text boxes, if they choose the second selection it will give them 20 text boxes and so on. Does anyone have an idea as to how to make that happen. I have searched everywhere and haven't been able to come up with anything. Thanks to anyone who can help me.


Javascript is ideally suited to this

Your controls (textboxes and dropdown list) must be contained within a form
Change the type of each of the 20 input boxes from type="text" to type="hidden"
Ensure that each of the 20 input boxes has a unique name
Incorporate an onChange event to fire a javascript function that changes the relevant inputs from type="hidden" to type="text"

e.g.

<select name="myDropDownListName" onChange="changeTypeToText();">

<option value="0"> Please select: </option>

<option value="ten"> Ten text boxes </option>
<option value="twenty"> Twenty text boxes</option>


</select>



<script type="text/javascript">

function (changeTypeToText)
{
var mySelect= document.myFormName.myDropDownListName;
if (mySelect[mySelect.selectedIndex].value == "ten")
{
document.myFormName.myInputBox01.type="text"
document.myFormName.myInputBox02.type="text"
document.myFormName.myInputBox03.type="text"
etc
etc
document.myFormName.myInputBox10.type="text"

}

if (mySelectName[mySelectName.selectedIndex].value == "twenty")
{
document.myFormName.myInputBox11.type="text"
document.myFormName.myInputBox12.type="text"
document.myFormName.myInputBox13.type="text"
etc
etc
document.myFormName.myInputBox.20type="text"

}

}

</script>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 28 2007, 11:12 PM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
For a version that works when JavaScript is disabled/unavailable, you'll need to have the form generated by a server-side (e.g., CGI, PHP) program. Next to the SELECT element will be a submit button to commit whatever it is the SELECT element specifies. When that submit button is used, then the server-side program returns another form with the same data that was in the first one, except the number of text boxes is different.

JavaScript can be used to avoid the round-trip to the server, as lavazza explained.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
lavazza
post Jun 30 2007, 08:15 AM
Post #4


Member
***

Group: Members
Posts: 60
Joined: 25-June 07
Member No.: 3,191
QUOTE(Darin McGrew @ Jun 29 2007, 04:12 PM) *

For a version that works when JavaScript is disabled/unavailable...


Thanks Darin! That reminded me that I had forgotten a <noscript> section...

Which, in turn, made me realise that my declaration of the function is WRONG!!!!

function (changeTypeToText) is WRONG... it should be
function changeTypeToText()

-----------

One way of writing the <select> so that it is visible only to visitors WITH javascript enabled:
CODE
    <body>

        <!-- earlier parts of the body here -->

        <script type="text/javascript">
            document.write('<select name="myDropDownListName" onChange="changeTypeToText();">'
                        + ' <option value="0"> Please select: <\/option>    '
                        + ' <option value="ten"> Ten text boxes <\/option>    '
                        + ' <option value="twenty"> Twenty text boxes<\/option> '
                        + ' <\/select> ' );
        </script>    
        <noscript>
            To see this section, javascript must be enabled on your browser
            <br/>
            <br/>
            <a href="https://www.google.com/adsense/support/bin/answer.py?answer=12654">
            How do I enable JavaScript in my browser?</a>
        </noscript>

        <!-- later parts of the body here -->

    </body>




This post has been edited by lavazza: Jun 30 2007, 08:18 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 3rd May 2024 - 11:39 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC